<template>
  <div>
    <ProductDetail @submit="apply" />
    <van-dialog v-model="showDialog" title="确认信息" :showConfirmButton="false">
      <div class="dialog-container">
        <ul>
          <li>姓名：{{ userInfo.nickname }}</li>
          <li>手机：{{ userInfo.phone }}</li>
          <li>公司名称：{{ userInfo.company }}</li>
        </ul>
        <p class="tips">温馨提示</p>
        <p class="note">您的信息提交后， 我们的专属顾问会尽快 和您联系</p>
        <div class="btn-wrapper">
          <van-button plain hairline type="default" color="#59677F" round @click="toggleDialog">取消</van-button>
          <van-button round color="#FD9100" @click="submit">确认</van-button>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import ProductDetail from './productDetail';
import { Button, Dialog, Toast } from 'vant';
import { order_saveOrder } from '@api/service';
export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
    [Button.name]: Button,
    ProductDetail
  },
  data() {
    return {
      showDialog: false
    };
  },
  methods: {
    toggleDialog() {
      this.showDialog = !this.showDialog;
    },
    apply() {
      if (!this.$store.state.token) {
        Dialog.confirm({
          title: '您还未实名，是否立即进行实名',
          confirmButtonColor: '#f09637',
          confirmButtonText: '立即实名',
          cancelButtonText: '暂不实名'
        }).then(() => {
          this.$router.openPage('/login');
        });
      } else {
        this.showDialog = true;
      }
    },
    async submit() {
      const { phone, company, nickname } = this.userInfo;
      let res = await order_saveOrder({ json: 1, phone, company, nickname, productId: this.$route.query.id });
      if (res.code === 200) {
        Toast('提交成功，稍后我们的专属顾问会及时与您联系');
        setTimeout(() => {
          this.$router.go(-1);
        }, 1000);
      } else {
        Toast(res.msg);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.dialog-container {
  padding: 0 42px 40px;
  line-height: 42px;
  font-size: 28px;
  color: #292f3d;
  ul {
    line-height: 60px;
    margin-bottom: 15px;
  }
  .tips {
    color: #fd9100;
    margin-top: 20px;
  }
  .note {
    color: #666;
  }
  .btn-wrapper {
    display: flex;
    button {
      flex: 1;
      margin: 60px 15px 0;
      height: 80px;
      line-height: 80px;
    }
  }
}
</style>
